
<template>
  <div id="container">
    <canvas-box
      :graphData="graphData"
      :currentNode="currentNode"></canvas-box>
  </div>
</template>

<script>
import CanvasBox from '@/components/Canvas'
import {
  company
} from '@/assets/js/company.js'
export default {
  name: 'Demo',
  components: {
    CanvasBox
  },
  data () {
    return {
      graphData: {},
      centerNode: {},
      currentNode: []
    }
  },
  created () {
    this.graphData = this.handleData(company)
  },
  methods: {

    /**
     * 处理数据
     * @date 2021-08-02
     * @param {Object} data
     * @returns {Object}
     */
    handleData (data) {
      const obj = {
        nodes: [],
        links: []
      }
      const nodes = data.nodes
      nodes.forEach(item => {
        if (item.label === '总公司') {
          const nodeObj = {
            id: item.id,
            label: item.label,
            properties: item,
            color: '38,186,191',
            selectedBorderColor: '131,218,228',
            shadowColor: '131,218,228'
          }
          nodeObj.size = 80
          nodeObj.x = 250
          nodeObj.y = 250
          this.centerNode = nodeObj
          this.currentNode.push(item.id)
        } else {
          const nodeObj = {
            id: item.id,
            label: item.label,
            properties: item,
            size: 60
          }
          switch (item.type) {
            case 1:
              nodeObj.color = '242,105,97'
              nodeObj.selectedBorderColor = '249,179,157'
              nodeObj.shadowColor = '249,179,157'
              break
          }
          obj.nodes.push(nodeObj)
        }
      })
      const links = data.edges
      links.forEach(item => {
        const linkObj = {
          id: item.id,
          target: item.to,
          source: item.from,
          label: item.label,
          properties: item
          // strokeColor: this.getRandomColor()
        }
        switch (item.type) {
          case 11:
            linkObj.color = '40,194,199'
            linkObj.selectedColor = '40,194,199'
            linkObj.shadowColor = '40,194,199'
            break
          case 12:
            linkObj.color = '250,108,100'
            linkObj.selectedColor = '250,108,100'
            linkObj.shadowColor = '250,108,100'
            break
          case 13:
            linkObj.color = '0,132,255'
            linkObj.selectedColor = '0,132,255'
            linkObj.shadowColor = '0,132,255'
            break
          case 15:
            linkObj.color = '250,108,100'
            linkObj.selectedColor = '250,108,100'
            linkObj.shadowColor = '250,108,100'
            break
        }
        obj.links.push(linkObj)
      })
      const nodeCount = obj.nodes.length
      const xyArr = this.getXY(this.centerNode, nodeCount, nodeCount * 20)
      obj.nodes.forEach((n, i) => {
        n.x = xyArr[i].x
        n.y = xyArr[i].y
        n.size = 60
      })
      obj.nodes.push(this.centerNode)
      return obj
    },
    /**
     * 遍布选中节点周围的点坐标
     * @date 2021-07-23
     * @param {中心节点} centerNode
     * @param {节点数量} nodeCount
     * @param {距离中心点距离} raduis
     * @returns {Array}
     */
    getXY (centerNode, nodeCount, raduis) {
      const aop = 360.0 / nodeCount
      const arr = []
      for (let i = 0; i < nodeCount; i++) {
        let r1 = raduis
        if (nodeCount > 10) {
          r1 = (i % 2 === 0 ? raduis + 35 : raduis - 35)
        }
        const ao = i * aop
        const o1 = {}
        o1.x = centerNode.x + r1 * Math.cos(ao * Math.PI / 180)
        o1.y = centerNode.y + r1 * Math.sin(ao * Math.PI / 180)
        arr[i] = o1
      }
      return arr
    }
  }
}
</script>
